<template>
	<view class="commend">
		<view class="hint-block">
			<view class="left-img center">
				<image :src="leftIcon" class="auto-img"></image>
			</view>
			<view class="title">推荐商品</view>
			<view class="right-img center">
				<image :src="rightIcon" class="auto-img"></image>
			</view>
		</view>
		<view class="item-s">
			<block v-for="(item,index) in goods" :key="index" v-if="goods.length>0">
				<view class="item" @tap="itemClick(item.id)">
					<view class="img">
						<image :src="item.main_image" class="auto-img  "></image>
					</view>
					<view class="title">{{item.title}}</view>
					<view class="price">
						<span>¥</span>{{item.price/100}}
					</view>
				</view>
			</block>
			<view class="no-emty" style="font-size: 26rpx;color: #999;" v-if="goods.length==0">暂无数据</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 
				leftIcon: require('@/static/cart/leftBlock.png'),
				rightIcon: require('@/static/cart/rightBlock.png'),
				page: 0,
				goods:[]
			}
		},
		created() {
			this.init()
		},
		methods: {
			itemClick(id) {
			 
				this.$emit('itemClick',id)
			},
			init() {
				this.$http('goods.getLikeCommodity', {
					page: this.page
				}).then(res => {
					if(res.code==200){
						this.goods=res.data.data
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.commend {
		padding: 0 24rpx;
		margin-top: 40rpx;

		.hint-block {
			display: flex;
			align-items: center;
			justify-content: center;

			.left-img {
				width: 106rpx;
				height: 12rpx;

			}

			.title {
				margin: 0 18rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 1);
			}

			.right-img {
				width: 106rpx;
				height: 12rpx;

			}
		}

		.item-s {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding-bottom: 40rpx;
		}

		.item {
			width: 340rpx;
			padding-bottom: 28rpx;

			background: #fff;
			margin-top: 30rpx;
			// border-radius: 16rpx 16rpx 0rpx 0rpx;
			border-radius: 16rpx;
			.img {
				// border-radius: 8rpx 8rpx 0rpx 0rpx;
				>image{
					width: 340rpx;
					height: 340rpx;
					border-top-right-radius: 16rpx;
					border-top-left-radius: 16rpx;
				}
			}

			.title {
				padding: 0 18rpx;
				margin-top: 20rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				color: rgba(27, 25, 25, 1);
				font-size: 28rpx;
			}

			.price {
				padding: 0 18rpx;
				margin-top: 12rpx;
				color: rgba(203, 60, 40, 1);

				span {
					font-size: 22rpx;

				}

			}
		}
		.no-emty{
			width: 100%;
			margin-top: 32rpx;
			text-align: center;
		}
	}
</style>
